<template>
<div class="">
    <div class="pr10">
        <div class="analyItem">
            <p class="analyItemTit tx-center">状态</p>
            <div class="analyItemCon">
            </div>
        </div>
    </div>
    <div class="thinScroll pr10" v-scrollHeight="84">
 <router-link tag="div" exact :to="routerPath('threePhoto')" class=" analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center" :class="this.userInfoPhoto[36] === null || this.userInfoPhoto[36] === undefined || this.userInfoPhoto[36] === '' ||
                                this.userInfoPhoto[41] === undefined || this.userInfoPhoto[41] === null || this.userInfoPhoto[41] === '' ? '' : 'analyLightGreen'">个人照片</p>
            <div class="analyItemCon">

                <p class="col-md-4"><span v-if="this.userInfoPhoto[36] === null || this.userInfoPhoto[36] === undefined || this.userInfoPhoto[36] === '' ||
                                this.userInfoPhoto[41] === undefined || this.userInfoPhoto[41] === null || this.userInfoPhoto[41] === ''">未传</span>
                                <span v-else>已传</span>
                                </p>
                    <!-- <p class="col-md-4">
                        <span  class="cLightGray col-md-12">艺术照片</span>
                     <rx-viewer class="mr10 fl mt20">
                        <div    class="look_imgHover fl relative pb20 tx-center" style="width:78px;height:78px;" >
                        <img  :src="this.userInfoPhoto[36]" />
                            <div class="upload_finish_div">
                                <div class="upload_finish_bg"></div>
                                <div class="upload_finish_linksm">
                                    <div class="dis-il-block">
                                        <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </rx-viewer>
                    </p>
                                        <p class="col-md-4">
                    <span class="cLightGray col-md-12">一寸照片</span>
                     <rx-viewer class="mr10 fl mt20"  >
                            <div  class="look_imgHover fl relative tx-center pb20" style="width:78px;height:78px;" >
                            <img  :src="this.userInfoPhoto[41]" />
                                <div class="upload_finish_div">
                                    <div class="upload_finish_bg"></div>
                                    <div class="upload_finish_linksm">
                                        <div class="dis-il-block">
                                            <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" ></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </rx-viewer>
                    </p> -->
             <p class="fl">
                    <span v-if="this.userInfoPhoto[41] === undefined || this.userInfoPhoto[41] === '' || this.userInfoPhoto[41] === null ||
                    this.userInfoPhoto[36] === undefined || this.userInfoPhoto[36] === '' || this.userInfoPhoto[36] === null" class="circlemark circlemark-lightRed">待</span>
                    <span v-else class="circlemark circlemark-lightGreen">全</span>
                </p>
            </div>
 </router-link>
   <router-link tag="div" exact :to="{path:routerPath('threeBank'), query:{pressIndex: 6, stageInfo: stageInfo}}" class=" analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center"  :class="this.userInfoPhoto[11] === undefined || this.userInfoPhoto[11] === '' || this.userInfoPhoto[11] === null ||
                    this.userInfoPhoto[9] === undefined || this.userInfoPhoto[9] === '' || this.userInfoPhoto[9] === null ||
                    stageInfo.bank_name === undefined || stageInfo.bank_name === '' || stageInfo.bank_name === null ||
                    stageInfo.bank_open === undefined || stageInfo.bank_open === '' || stageInfo.bank_open === null ||
                    stageInfo.bank_account === undefined || stageInfo.bank_account === '' || stageInfo.bank_account === null ? '' : 'analyLightGreen'">银行卡</p>
            <div class="analyItemCon">
                 <p class="col-md-6">
                    <span class="cLightGray pr8">姓名</span>
                    <span>{{stageInfo.bank_name ? stageInfo.bank_name : ''}}</span>
                </p>
                <p class="col-md-6">
                    <span class="cLightGray pr8">开户行</span>
                    <span>{{stageInfo.bank_open ? stageInfo.bank_open : ''}}</span>
                </p>
                <p class="col-md-6">
                    <span class="cLightGray pr8">账号</span>
                    <span>{{stageInfo.bank_account ? stageInfo.bank_account : ''}}</span>
                </p>
                <!-- <div class="col-md-12">
                    <p class="col-md-4">
                     <rx-viewer :options="{}"  >
                            <div class="fl mb10 mr20">
                                <div class="look_imgHover relative" :style="elstyle" >
                                    <img  :src="this.userInfoPhoto[9]"/>
                                    <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_link">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_link enlarge_viewer"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="imgInfo tx-center">银行卡正面</div>
                                </div>
                            </div>
                        </rx-viewer>
                    </p>
                    <p class="col-md-4">
                     <rx-viewer :options="{}"  >
                            <div class="fl mb10 mr20">
                                <div class="look_imgHover relative" :style="elstyle" >
                                <img  :src="this.userInfoPhoto[11]"/>
                                    <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_link">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_link enlarge_viewer"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="imgInfo tx-center">银行卡反面</div>
                                </div>
                            </div>
                    </rx-viewer>
                    </p> -->
                    <p class="fl">
                    <span v-if="this.userInfoPhoto[11] === undefined || this.userInfoPhoto[11] === '' || this.userInfoPhoto[11] === null ||
                    this.userInfoPhoto[9] === undefined || this.userInfoPhoto[9] === '' || this.userInfoPhoto[9] === null ||
                    stageInfo.bank_name === undefined || stageInfo.bank_name === '' || stageInfo.bank_name === null ||
                    stageInfo.bank_open === undefined || stageInfo.bank_open === '' || stageInfo.bank_open === null ||
                    stageInfo.bank_account === undefined || stageInfo.bank_account === '' || stageInfo.bank_account === null" class="circlemark circlemark-lightRed">待</span>
                    <span v-else class="circlemark circlemark-lightGreen">全</span>
                </p>
                </div>
            <!-- </div> -->
   </router-link>
   <router-link tag="div" exact :to="{path:routerPath('threeHetong'), query:{pressIndex: 6}}" class=" analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center" :class="this.userInfoPhoto[17] === undefined || this.userInfoPhoto[17] === '' || this.userInfoPhoto[17] === null ||
                            this.userInfoPhoto[23] === undefined || this.userInfoPhoto[23] === '' || this.userInfoPhoto[23] === null ||
                            this.userInfoPhoto[24] === undefined || this.userInfoPhoto[24] === '' || this.userInfoPhoto[24] === null ||
                            this.userInfoPhoto[25] === undefined || this.userInfoPhoto[25] === '' || this.userInfoPhoto[25] === null ? '' : 'analyLightGreen'">合同</p>
            <div class="analyItemCon">
                <p class="col-md-4"><span v-if="this.userInfoPhoto[17] === undefined || this.userInfoPhoto[17] === '' || this.userInfoPhoto[17] === null ||
                            this.userInfoPhoto[23] === undefined || this.userInfoPhoto[23] === '' || this.userInfoPhoto[23] === null ||
                            this.userInfoPhoto[24] === undefined || this.userInfoPhoto[24] === '' || this.userInfoPhoto[24] === null ||
                            this.userInfoPhoto[25] === undefined || this.userInfoPhoto[25] === '' || this.userInfoPhoto[25] === null">未传</span>
                            <span v-else>已传</span>
                            </p>
                               <!-- <p class="col-md-4">
                     <rx-viewer :options="{}"  >
                            <div class="fl mb10 mr20">
                                <div class="look_imgHover relative" :style="elstyle" >
                                <img  :src="this.userInfoPhoto[17]"/>
                                    <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_link">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_link enlarge_viewer"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="imgInfo tx-center">合同</div>
                                </div>
                            </div>
                    </rx-viewer>
                    </p> -->
                         <p class="fl">
                            <span v-if="this.userInfoPhoto[17] === undefined || this.userInfoPhoto[17] === '' || this.userInfoPhoto[17] === null ||
                            this.userInfoPhoto[23] === undefined || this.userInfoPhoto[23] === '' || this.userInfoPhoto[23] === null ||
                            this.userInfoPhoto[24] === undefined || this.userInfoPhoto[24] === '' || this.userInfoPhoto[24] === null ||
                            this.userInfoPhoto[25] === undefined || this.userInfoPhoto[25] === '' || this.userInfoPhoto[25] === null
                            " class="circlemark circlemark-lightRed">待</span>
                            <span v-else class="circlemark circlemark-lightGreen">全</span>
                        </p>
            </div>
   </router-link>
    <router-link tag="div" exact :to="routerPath('threeCost')" class=" analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center" :class="this.state === 0 ? '' : 'analyLightGreen'" >费用</p>
            <div class="analyItemCon" v-if="this.Manager.user_join_state == 1">
                <p class="col-md-6">
                   <span class="cLightGray pr8">押金</span>
                   <span>30000</span>
                </p>
                <p class="col-md-6">
                   <span class="cLightGray pr8">实缴</span>
                   <span>{{platformMoney ? platformMoney : 0}}</span>
                </p>
                <p class="fl">
                    <span v-if="this.state === 0" class="circlemark circlemark-lightRed">待</span>
                    <span v-else class="circlemark circlemark-lightGreen">全</span>
                </p>
            </div>

            <div class="analyItemCon" v-else-if="this.Manager.user_join_state == 2">
                <p class="col-md-6">
                    <span class="cLightGray pr8">押金和平台费</span>
                    <span>10000+5000</span>
                </p>
                <p class="col-md-6">
                    <span class="cLightGray pr8">实缴</span>
                    <span>{{platformMoney ? platformMoney : 0}}</span>
                </p>
                <p class="fl">
                    <span v-if="this.state === 0" class="circlemark circlemark-lightRed">待</span>
                    <span v-else class="circlemark circlemark-lightGreen">全</span>
                </p>
            </div>
            <div class="analyItemCon" v-else>
                <p class="col-md-6">
                    <span class="cLightGray pr8">押金</span>
                    <span>0</span>
                </p>
                <p class="col-md-6">
                    <span class="cLightGray pr8">实缴</span>
                    <span>0</span>
                </p>
                <p class="fl">
                    <span class="circlemark circlemark-lightRed"> 待</span>
                </p>
            </div>
            <!-- </div> -->
        </router-link>
            <!-- <button @click="printView()">打印</button> -->
             <router-link tag="div" exact :to="{path:routerPath('threeStandardQ'),query:{pressIndex: 7, standards: this.standards}}"  class=" analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center" :class="Number(this.standards.length) === 0 || this.scores < (30 * this.pmStandardSize) ? '' : 'analyLightGreen'">标准</p>
            <div class="analyItemCon">
            <p class="col-md-4">总分：<span class="cLightGray pr8">{{ 40 * this.pmStandardSize }}</span></p >
            <p class="col-md-4">得分：<span class="cLightGray pr8">{{ Number(this.standards.length) > 0 ? this.scores : 0 }}</span></p >
            <p class="fl">
                <span v-if="Number(this.standards.length) === 0 || this.scores < (30 * this.pmStandardSize)" class="circlemark circlemark-lightRed">待</span>
                <span v-else class="circlemark circlemark-lightGreen">过</span>
            </p>
        </div>
      </router-link>
    </div>
    <div class="analyItem" active-class="anItemBor-active">
        <p class="analyItemTit tx-center">处理</p >
      <div class="analyItemCon tx-center">
          <el-button @click="submit()" v-if="this.userInfoPhoto[36] === null || this.userInfoPhoto[36] === '' || this.userInfoPhoto[36] === undefined ||
          this.userInfoPhoto[41] === null || this.userInfoPhoto[41] === '' || this.userInfoPhoto[41] === undefined ||
          this.userInfoPhoto[9] === null || this.userInfoPhoto[9] === '' || this.userInfoPhoto[9] === undefined ||
          this.userInfoPhoto[11] === null || this.userInfoPhoto[11] === '' || this.userInfoPhoto[11] === undefined ||
          this.userInfoPhoto[17] === null || this.userInfoPhoto[17] === '' || this.userInfoPhoto[17] === undefined ||
            this.userInfoPhoto[23] === undefined || this.userInfoPhoto[23] === '' || this.userInfoPhoto[23] === null ||
                            this.userInfoPhoto[24] === undefined || this.userInfoPhoto[24] === '' || this.userInfoPhoto[24] === null ||
                            this.userInfoPhoto[25] === undefined || this.userInfoPhoto[25] === '' || this.userInfoPhoto[25] === null ||
                    stageInfo.bank_name === undefined || stageInfo.bank_name === '' || stageInfo.bank_name === null ||
                    stageInfo.bank_open === undefined || stageInfo.bank_open === '' || stageInfo.bank_open === null ||
                    stageInfo.bank_account === undefined || stageInfo.bank_account === '' || stageInfo.bank_account === null ||
                    platformMoney === undefined || platformMoney === '' || platformMoney === null ||
                Number(this.standards.length) === 0 || this.scores < (30 * this.pmStandardSize) || Number(this.leftInfo.stId) !== 4" disabled>通过</el-button>
        <el-button @click="submit()" v-else>通过</el-button>
          <!-- <el-button v-if="Number(this.leftInfo.stId) === 4" @click="submit()">通过</el-button> -->
      </div>
     </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { findStageInfoById, getUserListinfoPhoto, getPmStandardList, getPlatformMoney, selectPmUserInfoManager, getPmStandardUserList, nextStage } from '../Resources/Api'


export default {
    data () {
        return {
            pmStandardSize: 0, // 该阶段有几个标准
            elstyle: {
                width: '100px',
                height: '100px',
                float: 'left'
            },
            scores: 0, // 得分
            stageInfo: {},
            userInfoPhoto: {},
            pmDeposit: [], // 押金
            platformMoney: 0, // 平台费
            Manager: {}, // 入职类型
            standards: [], // 用户标准的集合
            photoList: [],
            state: 0 // 费用通过否
        }
    },
    created () {
        // this.findUserInfoById()
        this.UerInfoPhotoFn()
        this.findStageInfoById()
        this.getPlatformMoney() // 查询平台费
        this.selectPmUserInfoManager()
        this.getPmStandardUserList()
        this.getPmStandardList()
    },
    methods: {
        ...mapMutations({
            setUpdateLeft: `SET_UPDATE_LEFT`
        }),
        submit () {
            nextStage({
                userId: this.leftInfo.uid
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('提交成功')
                    this.setUpdateLeft()
                }
            }).catch(err => {
                console.log('进入下一阶段失败nextStage,异常信息：' + err)
            })
        },
        // // 形象照回显
        // getUserListinfoPhoto () {
        //     getUserListinfoPhoto({
        //         uid: this.leftInfo.uid // this.leftInfo.uid,
        //     }).then(res => {
        //         if (res.data.StatusCode === 0) {
        //             this.photoList = res.data.Body
        //         }
        //         console.log(res.data.Body)
        //     }).catch(err => {
        //         console.log('银行卡回显getUserListinfoPhoto失败，失败原因为' + err)
        //     })
        // },
        // 查询指定阶段的所有标准
        getPmStandardList () {
            getPmStandardList({
                stId: 4 // 认知阶段
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    this.pmStandardSize = result.data.Body.pmStandards.length
                    alert(this.pmStandardSize)
                }
            }).catch(err => {
                console.log('查询指定阶段的所有标准失败getPmStandardList，异常信息：' + err)
            })
        },
        // 查询用户成绩
        getPmStandardUserList () {
            getPmStandardUserList({
                stId: 4, // 阶段id 1-咨询，2-认知，3-考察，4-签约
                uid: this.leftInfo.uid
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    this.standards = result.data.Body.pmStandardUsers
                    // console.log(this.standards)
                    if (this.standards.length > 0) {
                        // debugger
                        this.standards.forEach(standard => {
                            // debugger
                            const sdScore = Number(standard.sd_score)
                            if (sdScore === 1) {
                                this.scores += 40
                            } else if (sdScore === 2) {
                                this.scores += 30
                            } else if (sdScore === 3) {
                                this.scores += 20
                            } else if (sdScore === 4) {
                                this.scores += 10
                            }
                        })
                    }
                }
            }).catch(err => {
                console.log('查询用户成绩失败getPmStandardUserList，异常信息：' + err)
            })
        },
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 查询签约
        selectPmUserInfoManager () {
            selectPmUserInfoManager({
                uid: this.leftInfo.uid
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.Manager = res.data.Body
                    // this.userJoinState = this.Manager.user_join_state
                }
            }).catch(err => {
                console.log('查询签约 selectPmUserInfoManager失败，原因为' + err)
            })
        },
        // 获取押金明细表的内容
        getPlatformMoney () {
            this.selectPmUserInfoManager()
            getPlatformMoney({
                uid: this.leftInfo.uid
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.pmDeposit = res.data.Body.moneyMaps
                    this.pmDeposit.forEach(item => {
                        if (item.depositState === 1) {
                            // alert(item.pmDeposit)
                            this.platformMoney += item.pmDeposit
                        }
                    })
                    if (this.pmDeposit.length > 0) {
                        if (this.pmDeposit.length === 1) {
                            if (this.pmDeposit[0].depositState === 1) {
                                this.state = 1 // 通过传统
                            }
                        } else {
                            if (this.pmDeposit[0].depositState === 1 && this.pmDeposit[1].depositState === 1) {
                                this.state = 1 // 通过平台
                            } else {
                                this.state = 0
                            }
                        }
                    }
                }
            }).catch(err => {
                console.log('查询平台服务费 getPlatformMoney失败，原因为' + err)
            })
        },
        // 点击通过时
        commit () {
            this.$emit('listenToChildEvent', '考察')
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        // 获取照片信息
        UerInfoPhotoFn () {
            // let _this = this
            // _this.userInfoPhoto = {}
            getUserListinfoPhoto({
                uid: this.leftInfo.uid // this.leftInfo.uid
            }).then(result => {
                if (result.data.StatusCode === 0) {
                    this.userInfoPhoto = result.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 获取所有信息
        findStageInfoById () {
            findStageInfoById({
                uid: this.leftInfo.uid
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    this.stageInfo = result.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'updatePlate'])
    },
    updated: function () {
    },
    watch: {
        updatePlate () {
            // this.findPhotoBy()
            this.scores = 0
            this.getPmStandardUserList()
            this.UerInfoPhotoFn()
        },
        leftInfo () {
            // if (this.leftInfo !== null && this.leftInfo !== undefined && this.leftInfo !== '') {
            //
            // }
            this.findStageInfoById()
        },
        $route () {
            this.findStageInfoById()
            this.selectPmUserInfoManager() // 查询入职状态
            this.platformMoney = 0
            this.getPlatformMoney() // 查询平台费
            this.UerInfoPhotoFn()
        }
    }
}
</script>
<style scoped>
.poserabsulye {
  width: 25px;
  height: 25px;
  line-height: 25px !important;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000;
  opacity: 0.6;
  color: #fff;
  border-radius: 5px;
}
</style>
